    var box = document.querySelector('#box');
    var aLi = document.querySelectorAll('.list li');
    var aNum = document.querySelectorAll('.count li');
    // 记录当前显示的图片的索引
    var current = 0;
    // 保存定时器
    var timer = null;

    // 自动的
    timer = setInterval(autoPlay,2000);
    function autoPlay(){
        current ++;
        if(current >= aLi.length){
            current  = 0;
        }
        show(current);
    }

    // 手动的
    for(var i = 0; i < aNum.length; i++){
        aNum[i].index = i;
        aNum[i].onmouseover = function(){
            show(this.index);
        }
    }

    // 处理图片的显示和隐藏
    function show(index){
        current = index;
        for(var i = 0; i < aLi.length; i++){
            aLi[i].style.display = 'none';
            aNum[i].className = '';
        }
        // 让当前的图片显示
        aLi[index].style.display = 'block';
        // 改变图片对应的数字的状态
        aNum[index].className = 'current';
    }

    // 当鼠标移入box容器的时候，让autoPlay停止，鼠标移出的继续自动播放
    box.onmouseover = function(){
        clearInterval(timer);
    }
    box.onmouseout = function(){
        timer = setInterval(autoPlay,2000);
    }